<template>
  <div class="command_box">
    <div class="flex-x flex-space add_command_btn">
      <div style="font-size: 18px; font-weight: bold; color: #409eff">
        mqtt配置
      </div>
      <div>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-arrow-up"
          @click="handleStowAll"
          >{{ activeNames.length == 0 ? "展开" : "收起" }}</el-button
        >
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="handleAdd"
          >添加</el-button
        >
      </div>
    </div>
    <div
      v-if="commandList.length == 0"
      class="nodata"
      style="margin-bottom: 20px"
    >
      暂无命令
    </div>
    <el-collapse
      v-model="activeNames"
      @change="handleChange"
      v-if="commandList.length !== 0"
    >
      <el-collapse-item
        :name="i"
        v-for="(item, i) in commandList"
        :key="item.id"
      >
        <template slot="title">
          <div
            style="font-size: 16px"
            class="flex-x flex-space w100 command_title_box"
          >
            <div class="command_title_box_dot"></div>
            <span> {{ setDefaultNamaeTitle(item, i) }} </span>
            <div style="padding: 0 10px">
              <i
                class="el-icon-full-screen"
                @click.stop="handleEdit(item, i)"
              ></i>
              <i
                v-if="!item.disabled"
                style="margin-left: 10px"
                class="el-icon-delete"
                @click.stop="handleDel(item, i)"
              ></i>
            </div>
          </div>
        </template>
        <el-form
          :ref="'form'"
          :inline="false"
          size="small"
          label-width="140px"
          :model="item"
          style="padding: 10px"
        >
          <el-card class="box-card" shadow="always">
            <div slot="header" class="clearfix">
              <span style="font-weight: 600">基础</span>
            </div>
            <el-row :gutter="20" style="margin-top: 6px; padding: 10px">
              <el-col
                :span="formItem.colSpan"
                :offset="0"
                v-for="(formItem, index) in filterAttributes(item, true)"
                :key="index"
              >
                <el-form-item
                  v-if="formItem.name !== 'clientId' || !item.disabled"
                  :prop="`attributes.${index}.value`"
                  :rules="rules(formItem, item)"
                  :label-width="formItem.defaultName ? '140px' : '0'"
                  :label="
                    formItem.defaultName ? formItem.defaultName + ':' : ''
                  "
                >
                  <el-input-number
                    class="w100"
                    v-if="formItem.type == 'inputNumber' && !item.disabled"
                    v-model="formItem.value"
                    :min="0"
                    :max="99999999999"
                    controls-position="right"
                    :placeholder="formItem.placeholder"
                  ></el-input-number>
                  <el-input
                    :disabled="item.disabled"
                    v-if="formItem.type == 'inputNumber' && item.disabled"
                    v-model="formItem.value"
                  >
                  </el-input>
                  <el-input
                    :disabled="item.disabled"
                    v-if="formItem.type == 'input'"
                    v-model="formItem.value"
                    clearable
                    :placeholder="
                      formItem.placeholder
                        ? formItem.placeholder
                        : '请输入' + formItem.defaultName
                    "
                  >
                    <template v-if="formItem.prepend" slot="prepend">{{
                      formItem.summary
                    }}</template>
                  </el-input>
                  <el-select
                    :disabled="item.disabled"
                    v-model="formItem.value"
                    :value-key="formItem.name"
                    :placeholder="'请选择' + formItem.defaultName"
                    filterable
                    size="small"
                    class="w100"
                    v-if="formItem.type == 'select'"
                  >
                    <el-option
                      v-for="item in formItem.options"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>

                  <el-switch
                    :disabled="item.disabled"
                    v-if="formItem.type == 'switch'"
                    v-model="formItem.value"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <el-card
            class="box-card"
            shadow="always"
            :style="{
              marginTop: '15px',
            }"
          >
            <div slot="header" class="clearfix">
              <div style="padding-right: 10px">
                <el-checkbox v-model="item.isopen">高级</el-checkbox>
              </div>
            </div>
            <el-row
              :gutter="20"
              v-if="item.isopen"
              style="margin-top: 6px; padding: 15px"
            >
              <el-col
                :span="formItem.colSpan"
                :offset="0"
                v-for="(formItem, index) in filterAttributes(item)"
                :key="index"
              >
                <el-form-item
                  :prop="`attributes.${index}.value`"
                  :rules="[
                    {
                      required: formItem.required,
                      message: formItem.defaultName + '不能为空',
                      trigger: 'blur',
                    },
                  ]"
                  :label-width="formItem.defaultName ? '160px' : '0'"
                  :label="
                    formItem.defaultName ? formItem.defaultName + ':' : ''
                  "
                >
                  <!-- v-if="formItem.type !== 'switch' || !item.disabled" -->
                  <el-input
                    :disabled="item.disabled"
                    v-if="formItem.type == 'input'"
                    v-model="formItem.value"
                    :placeholder="'请输入' + formItem.defaultName"
                  ></el-input>
                  <el-select
                    :disabled="item.disabled"
                    v-model="formItem.value"
                    :value-key="formItem.name"
                    :placeholder="'请选择' + formItem.defaultName"
                    clearable
                    filterable
                    size="small"
                    class="w100"
                    v-if="formItem.type == 'select'"
                  >
                    <el-option
                      v-for="item in formItem.options"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>

                  <el-switch
                    :disabled="item.disabled"
                    v-if="formItem.type == 'switch'"
                    v-model="formItem.value"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-form>
        <!-- @click="handleOpen(item)" -->
      </el-collapse-item>
    </el-collapse>
    <CommandDrawer
      @submit="editSubmit"
      :cloneDeepForm="cloneDeepForm"
      :drawerVisible.sync="drawerVisible"
    ></CommandDrawer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import _ from "lodash";
import CommandDrawer from "./CommandDrawer.vue";
export default {
  name: "Command",
  components: {
    CommandDrawer,
  },
  computed: {
    ...mapGetters(["configData"]),
    rules() {
      return function (formItem, row) {
        const idDis = row.disabled && formItem.name == "clientId";
        if (idDis) {
          formItem.required = false;
        }
        if (formItem.validator) {
          return [
            {
              required: idDis ? false : formItem.required,
              message: formItem.defaultName
                ? formItem.defaultName + "不能为空"
                : formItem.name + "不能为空",
              trigger: "blur",
            },
            {
              validator: (rule, value, callback) =>
                formItem.validator
                  ? formItem.validator(rule, value, callback, this.commandList)
                  : () => {},
              trigger: "blur",
            },
          ];
        } else {
          return [
            {
              required: idDis ? false : formItem.required,
              message: formItem.defaultName
                ? formItem.defaultName + "不能为空"
                : formItem.name + "不能为空",
              trigger: "blur",
            },
          ];
        }
      };
    },
    setDefaultNamaeTitle() {
      return function (item, i) {
        console.log("item :>> ", item);
        console.log(" this.configData :>> ", this.configData);
        const destinationId =
          item.attributes.find((f) => f.name == this.configData._idKey)
            ?.value || "未命名";

        return destinationId;
      };
    },
    commandList() {
      return this.$store.getters["tenantConfigCommand/getCommandList"]();
    },

    filterAttributes() {
      return function (item, flg) {
        return item.attributes.filter((f, i) => f.senior !== flg);
      };
    },
  },
  data() {
    return {
      activeNames: [],
      form: {
        value: "",
      },
      cloneDeepForm: {}, //用来编辑使用
      drawerVisible: false,
    };
  },
  mounted() {},
  methods: {
    // 收起全部
    handleStowAll() {
      if (this.activeNames.length) {
        this.activeNames = [];
      } else {
        this.activeNames = this.commandList.map((item, i) => i);
      }
    },
    // 编辑提交
    editSubmit() {
      this.$store.commit("tenantConfigCommand/editCommand", this.cloneDeepForm);
      this.drawerVisible = false;
    },
    // 添加命令,
    handleAdd() {
      //  打开添加的命令
      this.activeNames = [this.commandList.length];
      this.$store.commit("tenantConfigCommand/addCommand");
    },
    handleEdit(row) {
      this.cloneDeepForm = {
        ..._.cloneDeep(row),
        isopen: true,
      };
      this.drawerVisible = true;
    },
    handleDel(row, i) {
      this.$store.commit("tenantConfigCommand/delConfig", row.id);
    },
    submit(cellBack) {
      let valids = [];

      this.$refs["form"].forEach((item, index) => {
        valids.push(
          new Promise((resolve, reject) => {
            item.validate((valid) => {
              console.log("index :>> ", index);
              if (valid) {
                resolve();
              } else {
                this.activeNames.push(index);
                this.activeNames = _.unionBy(this.activeNames);
              }
            });
          })
        );
      });
      Promise.all(valids).then(() => {
        console.log("验证通过,提交表单");
        cellBack();
      });
    },
    handleChange() {},
    handleOpen(item) {
      this.$store.commit("tenantConfigCommand/setOpen", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.command_box {
  position: relative;
  .add_command_btn {
    padding: 18px 0;
  }

  .command_title_box {
    position: relative;
    padding-left: 10px;

    .command_title_box_dot {
      position: absolute;
      left: 0;
      height: 100%;
      width: 2px;
      border-radius: 4px;
      background-color: rgb(82, 196, 26);
    }

    /* .command_title_box_dot:nth-of-type(even) {
      background-color: pink;
    } */
  }

  /deep/ .el-card__header {
    padding: 10px;
    font-weight: bold;
  }
  /deep/ .el-collapse {
    border-bottom: 0;
    border-top: 0;
    &:first-child {
      .el-collapse-item__header {
        border-top: 0;
      }
    }
  }
  /deep/ .el-collapse-item {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    /* &:nth-of-type(odd) .command_title_box_dot {
      background-color: rgb(82, 196, 26);
    }
    &:nth-of-type(even) .command_title_box_dot {
      background-color:rgb(82, 196, 26);
    } */
  }
  /deep/ .el-collapse-item__header {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
  }
  /deep/ .el-col {
    padding-left: 0 !important;
  }
}
.is_open {
  /* font-size: 18px; */
  color: #409eff;
  margin-bottom: 15px;
}
</style>
